<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>椭圆运动效果</title>
    <style type="text/css">
        body {
            background-color: #eaf0f2;
        }

        h1 {
            font-size: 14px;
            font-family: "Microsoft Yahei";
            text-align: center;
        }

        body {
            background: #000;
        }

        .butterfly {
            width: 150px;
            height: 142px;
            margin: 0 auto;
            -webkit-transform-origin: center 150%;
            transform-origin: center 150%;
            -webkit-animation: circle 2s infinite linear;
            animation: circle 2s infinite linear;
        }

        .butterfly img {
            width: 100%;
            height: auto;
        }

        figure {
            margin-left: 200px;
            -webkit-animation: updown 1s infinite ease-in-out alternate;
            animation: updown 1s infinite ease-in-out alternate;
            /* -webkit-animation-delay:-.5s;  */
        }

        @-webkit-keyframes updown {
            to {
                -webkit-transform: translateY(200px);
                transform: translateY(200px);
            }
        }

        @-webkit-keyframes circle {
            to {
                -webkit-transform: rotate(-1turn);
                transform: rotate(-1turn);
            }
        }
    </style>
</head>
<body>
<h1>请使用webkit内核标准浏览器查看效果</h1>
<figure>
    <div class="butterfly">
        <img src="http://p7.qhimg.com/t01a4c54ef5309e561c.png" alt=""/>
    </div>
</figure>
</body>
</html>